<template>
  <div class="form-container" v-show="show_form">
    <el-form :model="form"
             :rules="rules"
             status-icon
             ref="ruleForm"
             label-position="left"
             label-width="60px"
             class="form-page">
      <h3 class="title">请假申请</h3>
      <el-form-item prop="id" label="学号">
        <el-input type="text"
                  v-model="form.id"
                  auto-complete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="reason" label="原因">
        <el-input type="text"
                  v-model="form.reason"
                  auto-complete="off"
        ></el-input>
      </el-form-item>

      <el-form-item style="width:100%;">
        <el-button type="primary"
                   style="width:100%;
                   margin-top: 20px"
                   @click="handleSubmit">
          提交
        </el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import axios from "axios";

export default {
  name: "ApplyForAbsent",
  data: () => {
    return {
      key: '',
      show_form: false,
      form: {
        id: '',
        reason: '',
      },
      rules: {
        id: [
          {required: true, trigger: 'blur'},
          {min: 1, max: 20, trigger: 'blur'}
        ],
        reason: [
          {required: true, trigger: 'blur'},
          {min: 1, max: 30, trigger: 'blur'}
        ],
      },

    }
  },
  methods: {
    handleSubmit() {
      if (this.form.id === '' || this.form.reason === '') {
        this.$message.error("请完成必填项")
        return
      }
      if (this.$store.state.debug) {
        this.$message({
          type: 'success',
          message: '请假成功！'
        });
      } else {
        axios.post(this.$store.state.post_site_dir.add_absent_application,
            {
              key: this.key,
              id: this.form.id,
              reason: this.form.reason
            })
            .then((res) => {
              if (res.data.error_code === 0) {
                this.$message({
                  type: 'success',
                  message: '请假成功！'
                });
                this.show_form = false
              } else if (res.data.error_code === 1) {
                this.$message.error('你已经请过假啦，不可以再请假了');
              } else if (res.data.error_code === 2) {
                this.$message.error('哦吼，超过截止时间了哦，单独找团长请假吧')
                this.show_form = false
              } else {
                this.$message.error('未知错误，请刷新重试')
              }
            })
      }
    }
  },
  mounted() {
    // 检验请假链接是否有效
    this.key = this.$route.params.key // 必须放在这里进行初始化
    if (this.$store.state.debug) {
      this.show_form = true
    } else {
      axios.post(this.$store.state.post_site_dir.check_absent_link,
          {
            key: this.key
          })
          .then((res) => {
            if (res.data.error_code === 0) {
              this.show_form = true
            } else if (res.data.error_code === 1) {
              // 无效链接
              this.show_form = false
              this.$message.error("无效链接，请检查网址是否正确")
            } else if (res.data.error_code === 2) {
              this.show_form = false
              this.$message.error("请假链接已超时，请直接向团长请假")
            } else {
              this.show_form = false
              this.$message.error("未知错误，请刷新页面重试")
            }
          })
    }
  }
}
</script>

<style scoped>
.form-container {
  width: 100%;
  height: 100%;
}

.form-page {
  -webkit-border-radius: 5px;
  border-radius: 5px;
  margin: 180px auto;
  width: 400px;
  padding: 35px 35px 15px;
  background: #fff;
  border: 1px solid #eaeaea;
  box-shadow: 0 0 25px #cac6c6;
}
</style>